<template>
  <el-dialog :title="title" :visible.sync="centerDialogVisible" width="80%" center @open="getList">
    <div class="page_main">
      <div class="search-box">
        <el-form ref="searchForm" :inline="true" size="mini" :model="searchForm">
          <search-form-box :show-more-btn="true">
            <template slot="showSearch">
              <el-form-item label="执行金额最小值：" prop="execute_amount_min">
                <el-input v-model="searchForm.execute_amount_min" placeholder="请输入执行金额最小值"></el-input>
              </el-form-item>
              <el-form-item label="执行金额最大值：" prop="execute_amount_max">
                <el-input v-model="searchForm.execute_amount_max" placeholder="请输入执行金额最大值"></el-input>
              </el-form-item>
            </template>
            <template slot="hideSearch">
              <el-form-item label="执行开始时间：" prop="begin_date">
                <el-date-picker v-model="searchForm.begin_date" type="date" placeholder="合同开始时间"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
                />
              </el-form-item>
              <el-form-item label="至" prop="begin_date">
                <el-date-picker v-model="searchForm.begin_date" type="date" placeholder="选择日期"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
                />
              </el-form-item>
              <el-form-item label="执行结束时间：" prop="end_date">
                <el-date-picker v-model="searchForm.end_date" type="date" placeholder="合同开始时间"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
                />
              </el-form-item>
              <el-form-item label="至" prop="end_date">
                <el-date-picker v-model="searchForm.end_date" type="date" placeholder="选择日期"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
                />
              </el-form-item>
            </template>
            <template slot="searchBtn">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="resetForm('searchForm')">重置</el-button>
              </el-form-item>
            </template>
          </search-form-box>
        </el-form>
      </div>
      <div class="table-box">
        <el-table ref="table" :span-method="arraySpanMethod" v-loading="tableLoading" :data="tableData" size="mini"
                  border max-height="600px"
        >
          <el-table-column type="index" label="序号" width="50" align="center" fixed="left">
            <template slot-scope="scope">
              <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="group_name" label="组名称" width="200" align="center" fixed="left">
          </el-table-column>
          <el-table-column label="到款详情" width="250" align="center" fixed="left">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.accountReceivedList" :key="index">
                <span>{{ item.account_received_time }}(￥{{ item.account }})</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="执行时间" width="200" align="center">
            <template slot-scope="scope">
              <el-tag size="mini">
                {{
                  scope.row.begin_date ? scope.row.begin_date + '~' + scope.row.end_date : ''
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="媒体形式" width="250" align="center">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.itemMediaPrice" :key="index">
                <span>{{ item.media_type_spec_price_name }}：{{ item.count + '个' }}(￥{{ item.price }})</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="本次执行数量" prop="media_count" width="200" align="center">
          </el-table-column>
          <el-table-column label="刊例总价" width="200" align="center">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.mediaPriceList" :key="index">
                <span>{{ item.media_type_spec_price_name }}：{{ item.count + '个' }}(￥{{ item.price }})</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="折扣" prop="discount" align="center" width="100">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.discount ? scope.row.discount + '%' : ''
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="本次执行单价" prop="media_price" align="center" width="100">
          </el-table-column>
          <el-table-column label="本次执行总价" prop="execute_amount" align="center" width="100">
          </el-table-column>
          <el-table-column label="置换金额" prop="displace_amount" align="center" width="100">
          </el-table-column>
          <el-table-column label="置换消费金额" prop="displace_consume_amount" align="center" width="100">
          </el-table-column>
          <el-table-column label="已执行金额" prop="executed_amount" align="center" width="100">
          </el-table-column>
          <el-table-column label="未执行金额" prop="unExecuted_amount" align="center" width="100">
          </el-table-column>
          <el-table-column label="是否开票" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.invoice_make_out ? '是' : '否' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开票明细" align="center">
            <el-table-column label="开票金额" prop="invoice_amount" align="center" width="100">
            </el-table-column>
            <el-table-column label="开票类目" prop="invoice_category_name" align="center" width="100">
            </el-table-column>
            <el-table-column label="开票增项" prop="additional_amount" align="center" width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column label="结算材料" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.invoice_make_out ? '是' : '否' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预计收款时间" prop="collection_time" align="center" width="100"></el-table-column>
          <el-table-column label="最新收款时间" prop="latest_collection_time" align="center" width="250">
            <template slot-scope="{row}">
              <div v-if="row.edit_date">
                <el-date-picker
                  size="mini"
                  v-model="row.latest_collection_time_back"
                  type="date"
                  placeholder="收款时间"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
                <div>
                  <el-button type="text" @click="row.edit_date = false">保存</el-button>
                  <el-button type="text" @click="row.edit_date = false">取消</el-button>
                </div>
              </div>
              <div v-else>
                {{ row.latest_collection_time }}
                <div>
                  <el-button type="text" @click="row.edit_date = true">修改</el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="计提额" prop="accrued_amount" align="center" width="100"></el-table-column>
          <el-table-column label="实际计提额" prop="actual_accrued_amount" align="center" width="100"></el-table-column>
          <el-table-column label="代理资源费用" prop="proxy_resource_amount" align="center" width="100"
          ></el-table-column>
          <el-table-column label="物料成本" prop="material_cost" align="center" width="100"></el-table-column>
          <el-table-column label="提成" prop="commission" align="center" width="100"></el-table-column>
          <el-table-column label="公司维护费" prop="company_maintenance_fee" align="center" width="100"
          ></el-table-column>
          <el-table-column label="客户维护费" prop="customer_maintenance_fees" align="center" width="100"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template slot-scope="{row}">
              <el-button size="mini" type="success" @click="collectionReminder(row.id)">发起收款提醒</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination :current-page.sync="searchForm.page" :page-sizes="[10,20,50,100, 200,400]"
                     layout="total, sizes, prev, pager, next, jumper" :page-size.sync="searchForm.page_size"
                     :total="total"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" size="mini" @click="centerDialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox/index.vue'
import { groupList as list } from '@/api/contract_manage'

export default {
  name: 'bill_group_list_dialog',
  components: { SearchFormBox },
  props: {
    title: {
      type: String,
      default: ''
    },
    contractId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      searchForm: {
        page: 1,
        page_size: 20,
        begin_date: null,
        end_date: null,
        execute_amount_min: null,
        execute_amount_max: null
      },
      listParams: {
        contract_id: null,
        page: 1,
        page_size: 20,
        begin_date: null,
        end_date: null,
        execute_amount_min: null,
        execute_amount_max: null
      },
      tableLoading: false,
      tableData: [],
      total: 0,
      centerDialogVisible: false
    }
  },
  methods: {
    getList() {
      this.listParams = Object.assign({ contract_id: this.contractId }, this.searchForm)
      this.tableLoading = true
      list(this.listParams).then(res => {
        this.tableLoading = false
        this.tableData = res.data.records
        // 循环遍历找出跨行个数
        let count = 0
        let last_id = -1
        let startIndex = 0
        for (let i = 0; i < this.tableData.length; i++) {
          var item = this.tableData[i]
          if (i === 0) {
            last_id = item.id
          }
          if (i === this.tableData.length - 1) {
            if (last_id !== item.id) {
              for (let j = startIndex; j <= i; j++) {
                if (startIndex === j) {
                  this.tableData[startIndex].span = [1, 1]
                } else {
                  this.tableData[j].span = [1, 1]
                }
              }
            } else {
              for (let j = startIndex; j <= i; j++) {
                if (startIndex === j) {
                  this.tableData[startIndex].span = [count + 1, 1]
                } else {
                  this.tableData[j].span = [0, 0]
                }
              }
            }
            break
          }
          if (last_id !== -1 && last_id !== item.id) {
            last_id = item.id
            this.tableData[startIndex].span = [count, 1]
            for (let j = startIndex + 1; j < i; j++) {
              this.tableData[j].span = [0, 0]
            }
            startIndex = i
            count = 1
          } else {
            count++
          }
        }
        this.tableData.forEach(item => {
          this.$set(item, 'latest_collection_time_back', item.latest_collection_time)
          this.$set(item, 'edit_date', false)
        })
        this.total = res.data.total
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      }).catch(() => {
        this.tableLoading = false
        this.tableData = []
      })
    },
    search() {
      this.searchForm.page = 1
      this.getList()
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
      this.getList()
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    show() {
      this.centerDialogVisible = true
    },
    collectionReminder() {

    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      /**
       *    组名称 1
       *    到款详情 2
       *    已执行金额 12
       *    未执行金额 13
       *    是否开票  14
       *    开票金额  15
       *    开票类目  16
       *    开票增项  17
       *    最新收款时间 20
       *    计提额   21
       *    实际计提额 22
       *    提成   25
       *    公司维护费 26
       *    客户维护费 27
       *    操作 28
       */
      const arr = [1, 2, 12, 13, 14, 15, 16, 17, 20, 21, 22, 25, 26, 27, 28]
      if (arr.includes(columnIndex)) {
        return row.span
      } else {
        return [1, 1]
      }
    }
  }
}
</script>

<style scoped>

</style>
